<template>
  <div class="social">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: status === row.type }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
      <el-link slot="right" type="info" :underline="false" @click="handleReadAll">一键已读</el-link>
    </my-tabs>
    <div class="social-list" v-if="notifyCommentList.length">
      <el-row class="social-item" type="flex" v-for="item in notifyCommentList" :key="item.id">
        <el-row type="flex" align="middle">
          <span class="badge" v-if="item.is_read == 0"></span>
          <edu-avatar
            shape="circle"
            :src="item.send_user_avatar_url"
            :size="40"
            @click="goUser(item.send_user_id)"
          ></edu-avatar>
        </el-row>
        <div class="content">
          <div class="name" @click="goUser(item.send_user_id)">{{ item.send_user_nick_name }}</div>
          <div class="question" @click="handlePush(item)">{{ item.content }}</div>
          <el-row type="flex" class="answer-box" v-if="$util.isDef(item.notify_data)">
            <el-divider direction="vertical"></el-divider>
            <div class="answer">{{ item.notify_data.content }}</div>
          </el-row>
          <div class="time">
            {{ item.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
          </div>
        </div>
      </el-row>
    </div>
    <edu-no-data :image="false" text="暂时没有互动消息哦~" v-else></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          type: '2',
          title: '全部'
        },
        {
          type: '1',
          title: '已读'
        },
        {
          type: '0',
          title: '未读'
        }
      ],
      notifyCommentList: [],
      status: '2'
    }
  },
  mounted() {
    this.handleNotifyCommentInfo()
  },
  computed: {
    notifyState() {
      let state = false
      for (let item of this.notifyCommentList) {
        if (item.is_read == 0) {
          state = true
        }
      }
      return state
    }
  },
  methods: {
    handleNotifyCommentInfo() {
      this.$api.getNotifyComment(
        {
          status: this.status,
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          let data = res.data
          this.notifyCommentList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: data.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.handleNotifyCommentInfo()
    },
    handlePush(item) {
      if (item.notify_type == 1) {
        this.$router.push({ path: '/course/' + item.notify_data.course_id })
      } else if (item.notify_type == 2) {
        this.$router.push({
          path: '/topic/details',
          query: {
            id: item.notify_data.topic_id
          }
        })
      } else if (item.notify_type == 4) {
        this.$router.push({
          path: '/circle/index'
        })
      }
      this.handleRead(item) // 读取消息
    },
    // 点击读取消息
    handleRead(item) {
      if (item.is_read == 0) {
        this.$api.createMessageRead({
          operate: 1,
          object: 3,
          id: item.id
        })
      }
    },
    // 一键读取
    handleReadAll() {
      if (this.notifyState) {
        this.$api.createMessageRead(
          {
            operate: 2,
            object: 3
          },
          res => {
            this.$message.success(res.msg, res => {
              this.reload()
            })
          }
        )
      }
    },
    handleClickMenu(data) {
      this.status = data.type
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleNotifyCommentInfo()
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.social {
  .social-item {
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid $border-color-divider;
    .badge {
      margin-right: 8px;
      width: 8px;
      height: 8px;
      background: $color-danger;
      border-radius: 50%;
    }
    .content {
      flex: 1;
      margin-left: 12px;
      .name {
        font-size: 13px;
        color: $text-color-secondary;
        cursor: pointer;
      }
      .question {
        margin-top: 8px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        color: $text-color-import;
        cursor: pointer;
      }
      .answer-box {
        margin-top: 8px;
        .el-divider {
          margin-top: 2px;
          margin-left: 0;
        }
      }
      .answer {
        font-size: 13px;
        line-height: 20px;
        color: $text-color-secondary;
      }
      .time {
        margin-top: 13px;
        font-size: 12px;
        color: $text-color-secondary;
      }
    }
  }
}
</style>
